import { Settings as ProSettings } from '@ant-design/pro-layout';
import React from 'react';
import { connect, ConnectProps, Dispatch, history } from 'umi';
import styles from './index.less';
import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { getdownLoadUrl } from '@/services/file';

export interface GlobalHeaderRightProps extends Partial<ConnectProps>, Partial<ProSettings> {
  theme?: ProSettings['navTheme'] | 'realDark';
  dispatch: Dispatch;
  userData?: any;
}

const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = props => {
  const { theme, layout, dispatch, userData } = props;
  let className = styles.right;

  if (theme === 'dark' && layout === 'top') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (
    <div className={className}>
      <div className="get_user_info">
        <div className="user_data_name">
          <span className="welome">欢迎您</span>
          <Avatar
            onClick={() => {
              history.push('/account/user_data');
            }}
            src={userData?.portrait ? getdownLoadUrl(userData?.portrait) : ''}
            size={40}
            icon={<UserOutlined />}
          />
          <span className="user_name">{userData?.userName ? `${userData.userName}老师` : ''}</span>
        </div>
        <div
          className="logout"
          onClick={() => {
            dispatch({
              type: 'login/logout',
            });
          }}>
          退出登录
        </div>
      </div>
    </div>
  );
};

export default connect(({ settings, login }: ConnectState) => ({
  theme: settings.navTheme,
  layout: settings.layout,
  userData: login.userData,
}))(GlobalHeaderRight);
